<template>
	<view>
		<view class="mainBox">
			<view v-html="content"></view>
		</view>
		<view class="flex-center btnBox">
			<view class="btn flex-center" @click="onSub()">立即加入</view>
			<view class="checkBigBox flex-center">
				<radio-group style="font-size: 27rpx;color: #333;margin: 20rpx;">
					<label class="select">
						<radio value="" :checked="checked" @click="isChecked" color="#41644A" />我已阅读并同意
						<text style="color: #41644A;"
							@click.stop="onSkip('/package/mine/agreement?pageType=报单协议')">《报单协议》</text>
					</label>
				</radio-group>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="pop-box">

				<view style="padding: 30rpx 0;font-weight: 600;color: #41644A;">请选择礼包</view>
				<view class="flex">
					<image :src="popupData.pic" mode="aspectFill" class="goods-img-pop" />
					<view class="fl between column">
						<view class="between">
							<view class="goods-name-pop">{{popupData.name}}</view>

						</view>
						<view class="goods-price-pop">￥{{popupData.sell_price}}</view>
					</view>
				</view>
				<view class="" v-for="(item,index) in specificationList">
					<view :class="['tag-label']" style="margin-top: 30rpx;">{{item.title}}</view>
					<view class="flex" style="flex-wrap: wrap;">
						<text @click="selectSpec(index,i)"
							:class="['g-tag',{'tagActive':i==selectSpecification[item.k]}]"
							v-for="(v,i) in item.items">{{v.title}}</text>
					</view>
				</view>

				<view style="padding: 30rpx 0;font-weight: 600;color: #41644A;">请选择礼包收货地址</view>
				<view class="order-address" v-if="addressMsg==null">
					<view class="flex align" style="justify-content: center;"
						@click="$toPage('/package/mine/setAddress/setAddress?setNew=true')">
						<image src="https://wx.2024csnl.com/static/goods/order-add.png" mode="aspectFill" class="order-add" />
						<view class="add-address">添加地址</view>
					</view>
				</view>
				<view class="order-address address-checked" v-else
					@click="onSkip('/package/mine/myAddress/myAddress?pageType=true')">
					<view class="between align">
						<view class="address-info">{{addressMsg.area}}{{addressMsg.address}}</view>
						<image src="https://wx.2024csnl.com/static/goods/into-black.png" mode="aspectFill" class="rightArrow" />
					</view>
					<view class="info flex">
						<view>{{addressMsg.name}}</view>
						<view style="margin-left: 50rpx;">{{addressMsg.tel}}</view>
					</view>
				</view>
				<view class="flex oneInput">
					<text style="color: #41644A;">*</text>
					<view class="title">真实姓名</view><input v-model="name" placeholder="请输入真实姓名"
						placeholder-style="color:#999999;font-size:30rpx;" />
				</view>
				<view class="textareaBox">
					<textarea class="textarea" v-model="remark" placeholder="备注(选填）" />
					<view class=" textNum">{{remark.length}}/140</view>
				</view>



				<button class="confirm-btn" @click="onGetTaxationForm('POST')">立即加入</button>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getTaxationForm,
		taxationSelect
	} from "../../api/index.js"
	export default {
		data() {
			return {
				name: '',
				remark: '',
				addressMsg: {},
				content: '',
				nid: '',
				price: '',
				checked: false,
				popupData: {}, //当前选取规格详情
				selectSpecification: [], //当前选取的规格
				specificationList: [], //规格列表
				specificationDetails: {}, //对应规格详情列表
				productId: '',
			}
		},
		async onLoad(opt) {
			this.nid = opt.nid
			await this.onGetTaxationForm('GET')
			this.getTaxationSelect()
		},
		 onShow() {
			// 选取地址
			uni.$on('selectAddress',  (data) => {
				this.addressMsg = data
			})
			// 监听是否刷新
			uni.$on('refresh',  (data) => {
				console.log('监听到刷新,',data)
				this.onGetTaxationForm('GET')
			})
		},
		beforeDestroy() {
			uni.$off('selectAddress');
		},
		methods: {
			// 选择规格
			selectSpec(index, i) {
				this.selectSpecification[index] = i
				this.getOneSpecificationDetails()
			},
			// 当前规格详情
			getOneSpecificationDetails() {
				let str = this.selectSpecification.join(',')
				this.popupData = this.specificationDetails[str]
			},
			// 报单选项
			async getTaxationSelect() {
				const res = await getTaxationForm(`s=ApiShop/getproductdetail`, {
					id: this.productId
				})
				const {
					status,
					msg,
					data,
				} = res.data
				if (status == 1) {
					const {
						guigedata,
						guigelist,
						ggselected
					} = res.data
					this.specificationList = guigedata
					this.specificationDetails = guigelist
					this.selectSpecification = ggselected
					this.getOneSpecificationDetails()
				} else {
					this.showToast(msg)
				}
			},

			onSub() {
				!this.checked ? this.showToast('请先阅读并同意协议') : this.open('popup')
			},
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},
			// 勾选协议
			isChecked(e) {
				this.checked = !this.checked
				// console.log(e,"eeeee")
			},
			async onGetTaxationForm(type) {
				console.log(type,'type------')
				if (type == 'POST'&& (this.addressMsg == null || JSON.stringify(this.addressMsg) == '{}') ) {
					this.showToast('请完善收货地址~')
				} else if (this.name == '' && type == 'POST') {
					this.showToast('请完输入真实姓名~')
				} else {
					let dataMsg
					if (type == 'GET') {
						dataMsg = {
							nid: this.nid,
						}
					} else {
						const {
							proid,
							id
						} = this.popupData
						dataMsg = {
							nid: this.nid,
							address_id: this.addressMsg.id,
							remak: this.remark,
							rename: this.name,
							prodata: `${proid},${id},1`
						}
					}

					const res = await getTaxationForm(`s=ApiIndex/baodan`, dataMsg, type)
					const {
						status,
						address,
						msg,
						data,
						orderid,
						payorderid
					} = res.data
					if (status == 1) {
						if (type == 'GET') {
							this.addressMsg = address
							this.content = data.navigationcontent
							this.price = data.price
							this.productId = data.goodsid
						}
						if (type == "POST") {
							this.close('popup')
							this.onSkip(
								`/business/pages/business_tab/orderPay?money=${this.price}&orderId=${orderid}&pageType=报单`)
						}
						// console.log(data, "fff")
					} else {
						this.showToast(msg)
					}
				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	.textareaBox {
		position: relative;
	}

	.textNum {
		position: absolute;
		bottom: 20rpx;
		text-align: end;
		width: 95%;
	}

	.textarea {
		height: 120rpx;
		background: #F7F7F7;
		padding: 36rpx;
		width: 90%;
		font-size: 30rpx;
	}

	.oneInput {
		margin: 30rpx 0 30rpx;
		font-size: 36rpx;
		padding: 30rpx 41rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		align-items: center;

		.title {
			width: 30%;
		}
	}

	.goods-img-pop {
		border-radius: 10rpx;
		background-color: #F5F5F5;
		width: 147rpx;
		height: 147rpx;
		margin-right: 30rpx;
	}

	.goods-name-pop {
		font-size: 30rpx;
	}

	.close-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.goods-price-pop {
		color: #F41717;
	}

	.tag-label {
		font-size: 27rpx;
		margin-top: 64rpx;
	}

	.g-tag {
		display: inline-block;
		font-size: 24rpx;
		line-height: 48rpx;
		padding: 0 24rpx;
		background-color: #F7F7F7;
		border-radius: 8rpx;
		margin: 20rpx 0;
		margin-right: 32rpx;
	}

	.tagActive {
		background: #41644A;
		color: #FFF;
	}

	.rightArrow {
		width: 30rpx;
		height: 20rpx;
	}

	.order-address {
		// margin: 20rpx 20rpx 50rpx;
		background: #f7f7f7;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		padding-bottom: 4rpx;
		min-height: 100rpx;

		.address-info {
			font-size: 29rpx;
			width: 580rpx;
		}

		.info {
			color: #999999;
			font-size: 27rpx;
			margin: 20rpx 0;
		}

		.order-add {
			width: 32rpx;
			height: 32rpx;
			margin-right: 15rpx;
		}

		.add-address {
			color: #41644A;
			line-height: 160rpx;
			text-align: center;
		}
	}

	.address-checked {
		margin-top: 0;
		border-radius: 0 0 20rpx 20rpx;
	}

	.confirm-btn {
		border-radius: 30rpx;
		position: fixed;
		bottom: 30rpx;
		width: 95vw;
		background-color: #41644A;
		color: #FFF;
		margin-top: 56rpx;
	}

	.pop-box {
		background-color: #FFF;
		padding: 30rpx 20rpx;
		height: 70vh;
		padding-bottom: 150rpx;
		overflow-y: auto;
	}

	.checkBigBox {
		text-align: center;
		font-size: 26rpx;
		margin-top: 50rpx;
	}

	.mainBox {
		// padding-bottom: 200rpx;
		min-height: 100vh;
	}

	image {
		width: 100%;
		height: 120vh;
	}

	.btnBox {
		position: fixed;
		bottom: 60rpx;
		width: 100vw;
		flex-direction: column;
	}

	.btn {
		width: 95%;
		height: 100rpx;
		background: #41644A;
		border-radius: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}
</style>
